<template>
  <div class="app-container">
    <YxhyTableQuery
      ref="yxhyTableQueryRef"
      :query-params.sync="queryParams"
      :query-columns="queryColumns"
      @search="handleQuery"
    >
      <template slot="datetimeRange">
        <el-date-picker
          v-model="timeRange"
          type="datetimerange"
          align="right"
          start-placeholder="支付开始日期"
          end-placeholder="支付结束日期"
          :default-time="['00:00:00', '23:23:59']"
        />
      </template>
      <el-form-item slot="button">
        <el-button type="primary" @click="handleClear">清空搜索</el-button>
      </el-form-item>
    </YxhyTableQuery>

    <YxhyTableData :columns="columns" :data="tableList" :loading="loading">
      <!-- 用户信息插槽 -->
      <template #userInfo>
        <el-table-column label="用户信息" width="auto">
          <template slot-scope="{ row }">
            <p class="font-color-td">ID：{{ row.user_id }}</p>
            <p class="font-color-td">昵称：{{ row.nick_name }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 支付金额插槽 -->
      <template #payMoney>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">支付金额</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">￥{{ row.recharge_money }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 支付状态插槽 -->
      <template #payStatus>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">支付状态</p>
          </template>
          <template slot-scope="{ row }">
            <p class="pay-status-icon" :class="{'pay-success': row.status === 1, 'pay-final': row.status === 0 }">{{ row.status_text }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 注册时间插槽 -->
      <template #registerTime>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">注册时间</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">{{ row.reg_time }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 最后看剧记录插槽 -->
      <template #lastSeeTime>
        <el-table-column align="center" width="auto">
          <template
            slot="header"
            slot-scope="{ column, $index }"
          >
            <p class="font-color-th">观看剧集</p>
          </template>
          <template slot-scope="{ row }">
            <p class="font-color-td">{{ row.video_name | domEmpty }}</p>
            <p v-if="row.episode_num > 0" class="font-color-td">第{{ row.episode_num }}集</p>
          </template>
        </el-table-column>
      </template>
    </YxhyTableData>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryPage.pageNum"
      :limit.sync="queryPage.limit"
      @pagination="init"
    />

    <!--  手动回传弹出层  -->
    <HandMovement ref="handMovementRef" :order_id="actionOrderId" :order_type="1" @refresh="init()" />

  </div>
</template>

<script>
import { ADV_STATUS, columnsStatic, ORDER_PAY_STATUS } from './Ds.js'
import { formatDate } from '@/utils'
import { queryOrderCoinList, queryOrderVipList } from '@/api/order/orderData'
import HandMovement from '@/components/HandMovement/index.vue'
import { queryListNonSortMp } from '@/api/miniProgram/mp'
import { queryNonSortLibrary } from '@/api/video/library'

export default {
  name: 'OrderDataCoinCopyRightList',
  components: {
    HandMovement
  },
  data() {
    return {
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 分页参数
      queryPage: {
        pageNum: 1,
        limit: 10
      },
      // 查询参数
      queryParams: {
        user_id_search: undefined,
        nick_name_search: undefined,
        status_search: undefined
      },
      timeRange: undefined,
      queryTimeRange: {
        pay_at_start_search: undefined,
        pay_at_end_search: undefined
      },
      // 查询表单
      queryColumns: [{
        label: '',
        placeholder: '请输入用户ID',
        type: 'input',
        param: 'user_id_search'
      },
      {
        label: '',
        type: 'datetimeRange',
        param: 'pay_at_start_search'
      },
      {
        label: '',
        placeholder: '支付状态',
        type: 'select',
        param: 'status_search',
        selectOptions: [{ name: '已支付', value: 1 }, { name: '未支付', value: 0 }] // 下拉框选项
      }],
      loading: false,
      // 表格列
      columns: columnsStatic,

      actionOrderId: undefined,

      queryListNonSortMp,
      queryNonSortLibrary
    }
  },
  watch: {
    timeRange: {
      handler(val) {
        if (!val) {
          this.queryTimeRange.pay_at_start_search = undefined
          this.queryTimeRange.pay_at_end_search = undefined
        } else {
          const [startTime, endTime] = val
          this.queryTimeRange.pay_at_start_search = formatDate(startTime)
          this.queryTimeRange.pay_at_end_search = formatDate(endTime)
        }
      },
      deep: true
    }
  },
  async created() {
    await this.init()
  },
  methods: {
    // 表格数据源
    async init() {
      this.loading = true
      const res = await queryOrderCoinList({
        ...this.queryPage,
        ...this.queryParams,
        ...this.queryTimeRange
      })
      // 处理响应
      res.data.map(e => {
        const { status, adv_status, pay_at } = e
        e.status_text = ORDER_PAY_STATUS[status]
        e.adv_status_text = ADV_STATUS[adv_status]
        e.pay_at = pay_at || '-'
      })
      this.tableList = res.data
      this.total = res.total
      this.loading = false
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryPage.pageNum = 1
      this.init()
    },
    /** 清空搜索按钮操作 */
    handleClear() {
      this.timeRange = undefined
      this.queryTimeRange = {
        created_at_start_search: undefined,
        created_at_end_search: undefined
      }

      this.$refs.yxhyTableQueryRef.onEmpty()
    },
    /** 回传按钮操作 */
    handleHandMovement(row) {
      const { order_id } = row
      this.actionOrderId = order_id
      this.$refs.handMovementRef.handleOpen()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
